<div class="dialog-container  mdl-shadow--8dp mdl-layout--fixed-header calculater-content">
  <div class="kmi-header-row">
      <div class="header-title" ng-bind="dialog.calculater.options.title | translate"></div>
      <div class="kmi-side-btn right" ng-click="dialog.cancel();">
          <img src="image/icons/clear.png"></img>
          <div class="kmi-can-click"></div>
      </div>
  </div>
  <div class="kmi-layout-main-content">
    <div class="kmi-layout-page">
        <div class="display-content" ng-if="dialog.calculater.options.type != 'date'">
            <!--20220906 modify by wangqq for#0118673 ：数字开窗内只允许输入数字和小数点-->
            <!--20221026 modify by Alan for#102689 : 優化負數功能，數字0也可以選負數-->
            <!-- 20231020 modify by Alan for#148310 : backspace需要從key_up事件取值 -->
            <input class="display" id="calculater_display" ng-model="dialog.calculater.numDisplay"
                ng-keypress="dialog.key_input($event);" ng-keyup="dialog.key_up($event)"></input>
        </div>
        <div class="display-content time" ng-if="dialog.calculater.options.type == 'date'">
            <input class="display" id="hour_display" ng-model="dialog.calculater.timeDisplay['hour']"
                ng-class="{'focus':dialog.calculater.focus == 'hour'}" ng-focus="dialog.calculater.focus = 'hour'"
                ng-keypress="dialog.key_input($event, 'hour');" ng-click="dialog.calculater.focus = 'hour'"
                ng-keyup="dialog.key_up($event)"></input>
            <label>:</label>
            <input class="display" id="minute_display" ng-model="dialog.calculater.timeDisplay['minute']"
                ng-class="{'focus':dialog.calculater.focus == 'minute'}" ng-focus="dialog.calculater.focus = 'minute'"
                ng-keypress="dialog.key_input($event, 'minute');" ng-click="dialog.calculater.focus = 'minute'"
                ng-keyup="dialog.key_up($event)"></input>
            <label>:</label>
            <input class="display" id="second_display" ng-model="dialog.calculater.timeDisplay['second']"
                ng-class="{'focus':dialog.calculater.focus == 'second'}" ng-focus="dialog.calculater.focus = 'second'"
                ng-keypress="dialog.key_input($event, 'second');" ng-click="dialog.calculater.focus = 'second'"
                ng-keyup="dialog.key_up($event)"></input>
        </div>
        <div style="display:flex;">
        <div class="numBtn-content">
            <div class="numBtn-item" ng-click="dialog.add_num(7);">
                <span>7</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(8);">
                <span>8</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(9);">
                <span>9</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(4);">
                <span>4</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(5);">
                <span>5</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(6);">
                <span>6</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(1);">
                <span>1</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(2);">
                <span>2</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num(3);">
                <span>3</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item zero-btn" ng-click="dialog.add_num('0');"  ng-class="{ 'big':!dialog.calculater.options.decimal, 'small': dialog.calculater.options.enableNegative }">
                <span>0</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item negative" ng-click="dialog.negativeNum();" ng-class="{ 'show': dialog.calculater.options.enableNegative }">
                <span>-</span>
                <div class="kmi-can-click"></div>
            </div>
            <div class="numBtn-item" ng-click="dialog.add_num('.');" ng-hide="!dialog.calculater.options.decimal">
                <span>.</span>
                <div class="kmi-can-click"  ng-show="dialog.calculater.options.decimal"></div>
            </div>
        </div>
        <div class="control-content">
            <div class="control-btn" ng-click="dialog.deleteNum();">
                <i class="material-icons">backspace</i>
                <div class="kmi-can-click"></div>
            </div>
            <div class="control-btn" ng-click="dialog.calculater.confirmNum(dialog.confirm);" style="flex:1;line-height: 120px;">
                <i class="material-icons">&#xE31B;</i>
                <div class="kmi-can-click"></div>
            </div>
        </div>
        </div>
    </div>
  </div>
</div>
